import React, { Component } from 'react';

// 引入 ECharts 主模块
import echarts from 'echarts/lib/echarts';
// 引入饼状图
import  'echarts/lib/chart/pie';
// 引入提示框和标题组件
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';

class EchartsTest extends Component {
    componentDidMount() {
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('bing'));
        // 绘制图表
        myChart.setOption({
            title: {
                text: '各科室医生人数统计',
                subtext: '全院',
                left: 'center'
            },
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                // orient: 'vertical',
                // top: 'middle',
                bottom: 10,
                left: 'center',
                data: ['呼吸内科', '消化内科', '泌尿内科', '心内科', '血液科', '内分泌科', '神经内科', '儿科', '感染科', '普外科', '骨科', '妇科', '产科', '神经外科', '肝胆外科']
            },
            series: [
                {
                    type: 'pie',
                    radius: '65%',
                    center: ['50%', '50%'],
                    selectedMode: 'single',
                    data: [
                        {value: 15,name: '呼吸内科',},
                        {value: 13, name: '消化内科'},
                        {value: 17, name: '泌尿内科'},
                        {value: 20, name: '心内科'},
                        {value: 25, name: '血液科'},
                        {value: 28,name: '内分泌科',},
                        {value: 13, name: '神经内科'},
                        {value: 19, name: '儿科'},
                        {value: 22, name: '感染科'},
                        {value: 30, name: '普外科'},
                        {value: 24,name: '骨科',},
                        {value: 35, name: '妇科'},
                        {value: 10, name: '产科'},
                        {value: 23, name: '神经外科'},
                        {value: 32, name: '肝胆外科'}
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        });
    }
    render() {
        return (
            <div id="bing" style={{ height: 360 }}></div>
        );
    }
}

export default EchartsTest;